<style scoped lang="scss">
.bigBox {
  width: 100vw;
  height: 100vh;
  background-color: #f2f2f2;
  display: flex;
  flex-direction: column;
  header {
    width: 100%;
    height: 50px; // 100px * 0.5
    margin-bottom: 5px; // 10px * 0.5
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .header-left {
      margin-left: 10px; // 20px * 0.5
    }
    .header-center {
      margin-right: 10px; // 20px * 0.5
      p {
        font-size: 13px; // 26px * 0.5
      }
    }
  }
  main {
    width: 100%;
    flex: 1;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    .renwu-one {
      width: 100%;
      height: 150px; // 300px * 0.5
      display: flex;
      flex-direction: column;
      .renwu-top {
        width: 100%;
        height: 65px; // 130px * 0.5
        display: flex;
        justify-content: space-between;
        align-items: center;
        .renwu_left {
          width: 70px; // 140px * 0.5
          height: 100%;
          span {
            position: relative;
            top: 30px; // 60px * 0.5
            left: 25px; // 50px * 0.5
            color: #fff;
            font-size: 12px; // 24px * 0.5
          }
        }
        .renwu_right {
          width: 120px; // 240px * 0.5
          margin-right: 14px; // 28px * 0.5
          p {
            font-size: 10px; // 20px * 0.5
            color: #68a8ef;
          }
        }
      }
      .renwu-bot {
        width: 100%;
        margin-top: 10px; // 20px * 0.5
      }
    }
    .renwu-two {
      width: 100%;
      height: 250px; // 500px * 0.5
      display: flex;
      flex-direction: column;
      .renwu-toptwo {
        width: 100%;
        height: 65px; // 130px * 0.5
        display: flex;
        justify-content: space-between;
        align-items: center;
        .renwu_lefttwo {
          width: 70px; // 140px * 0.5
          height: 100%;
          span {
            position: relative;
            top: 32px; // 64px * 0.5
            left: 25px; // 50px * 0.5
            color: #fff;
            font-size: 12px; // 24px * 0.5
          }
        }
      }
      .renwu_bottwo {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        .bottwo_contop {
          width: 90%;
          height: 50px; // 100px * 0.5
          padding: 5px; // 10px * 0.5
          display: flex;
          justify-content: space-between;
          align-items: center;
          button {
            width: 50px;
            padding: 7px 0;
            background-color: #3087ea;
            color: #fff;
            font-size: 11px;
            border: none;
            border-radius: 6px;
          }
        }
      }
    }
    .renwu-three {
      width: 100%;
      height: 200px; // 400px * 0.5
      display: flex;
      flex-direction: column;
      .renwu-topthree {
        width: 100%;
        height: 65px; // 130px * 0.5
        display: flex;
        justify-content: space-between;
        align-items: center;
        .renwu_leftthree {
          width: 70px; // 140px * 0.5
          height: 100%;
          span {
            position: relative;
            top: 32px; // 64px * 0.5
            left: 25px; // 50px * 0.5
            color: #fff;
            font-size: 12px; // 24px * 0.5
          }
        }
      }
      .renwu-botthree {
        width: 100%;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        .botthree_contop {
          width: 90%;
          height: 50px; // 100px * 0.5
          padding: 5px; // 10px * 0.5
          display: flex;
          justify-content: space-between;
          align-items: center;
          button {
            width: 50px;
            padding: 7px 0;
            background-color: #3087ea;
            color: #fff;
            font-size: 11px;
            border: none;
            border-radius: 6px;
          }
        }
      }
    }
  }
}
</style>

<template>
  <div class="bigBox">
    <header>
      <div class="header-left">
        <van-icon style="font-size: 30px" name="arrow-left" @click="onClickLeft" />
      </div>
      <div class="header-center">
        <p>我的任务</p>
      </div>
      <div class="header-right"></div>
    </header>
    <main>
      <div class="renwu-one">
        <div class="renwu-top">
          <div class="renwu_left">
            <span>签到条</span>
            <div>
              <img style="width: 200px" src="../../assets/阅读器_横形书签.png" alt="" />
            </div>
          </div>
          <div class="renwu_right">
            <p>注：连续签到H币将会累积</p>
          </div>
        </div>
        <div class="renwu-bot">
          <van-steps
            active-color="#3087ea"
            :active="active"
            style="padding-left: 30px; padding-right: 30px"
          >
            <van-step>第1天</van-step>
            <van-step>第2天</van-step>
            <van-step>第3天</van-step>
            <van-step>第4天</van-step>
            <van-step>第5天</van-step>
            <van-step>第6天</van-step>
            <van-step>第N天</van-step>
          </van-steps>
          <p style="width: 100%; display: flex; justify-content: space-between">
            <span style="margin-left: 20px">+1</span>
            <span style="margin-left: 12px">+2</span>
            <span style="margin-left: 22px">+3</span>
            <span style="margin-left: 18px">+4</span>
            <span style="margin-left: 20px">+5</span>
            <span style="margin-left: 10px">+10</span>
            <span style="margin-right: 16px">+10</span>
          </p>
        </div>
      </div>
      <div class="renwu-two">
        <div class="renwu-toptwo">
          <div class="renwu_lefttwo">
            <span>每日任务</span>
            <div>
              <img style="width: 210px" src="../../assets/阅读器_横形书签.png" alt="" />
            </div>
          </div>
        </div>
        <div class="renwu_bottwo">
          <div class="bottwo_contop">
            <p>签到</p>
            <button @click="handleSign" :disabled="flag">
              {{ qiandao }}
            </button>
          </div>
          <div class="bottwo_contop">
            <div>
              <p>首发病友圈</p>
              <p><span style="color: #3087ea">+10</span>H币</p>
            </div>
            <button @click="goBind">去完成</button>
          </div>
          <div class="bottwo_contop">
            <div>
              <p>病友圈首评</p>
              <p><span style="color: #3087ea">+10</span>H币</p>
            </div>
            <button>去完成</button>
          </div>
        </div>
      </div>
      <div class="renwu-three">
        <div class="renwu-topthree">
          <div class="renwu_leftthree">
            <span>一次性任务</span>
            <div>
              <img style="width: 240px" src="../../assets/阅读器_横形书签.png" alt="" />
            </div>
          </div>
        </div>
        <div class="renwu-botthree">
          <div class="botthree_contop">
            <div>
              <p>完善我的信息</p>
              <p><span style="color: #3087ea">+30</span>H币</p>
            </div>
            <button @click="goMyxinxi">去完成</button>
          </div>
          <div class="botthree_contop">
            <div>
              <p>参与健康评测</p>
              <p><span style="color: #3087ea">+10</span>H币</p>
            </div>
            <button>去完成</button>
          </div>
        </div>
      </div>
    </main>
    <footer></footer>
  </div>
</template>

<script setup lang="ts">
import { addSign, findUserSign, whetherSignToday } from '@/api/search'
import { request } from '@/axios/request'
import router from '@/router'
import { ElMessage } from 'element-plus'
import { ref } from 'vue'

const userId = ref(parseInt(localStorage.getItem('userId') as string))
const sessionId = ref(JSON.parse(localStorage.getItem('sessionId') as string))
const qiandao = ref('签 到')
const flag = ref(false)
// 用户签到
const handleSign = async () => {
  const res = await addSign(userId.value, sessionId.value)
  console.log(res)
  ElMessage.success(res.data.message)
}
// 查询签到天数
const findUserSignOne = async () => {
  const res = await findUserSign(userId.value, sessionId.value)
  console.log('查询用户连续签到天数', res)
  active.value = res.data.result - 1
}
findUserSignOne()
// 查询是否签到
const whetherSignTodayOne = async () => {
  const signIn = '已签到'
  const res = await whetherSignToday(userId.value, sessionId.value)
  // const button = ref({
  //   backgroundColor: '#3087ea'
  // })
  console.log('查询是否签到', res)
  if (res.data.status == '0000') {
    flag.value = true
    qiandao.value = '已签到'
    // 修改颜色为灰色
    // button.style.backgroundColor = '#fff'
    localStorage.setItem('signin', signIn)
  }
}
whetherSignTodayOne()

const active = ref(0)
const goMyxinxi = () => {
  router.push('/xgtizheng')
}
// 去病友圈
const goBind = () => {
  router.push('/fabiao')
}

const onClickLeft = () => history.back()
</script>
<style scoped lang="scss">
.bigBox {
  width: 100vw;
  height: 100vh;
  background-color: #f2f2f2;
  display: flex;
  flex-direction: column;
  header {
    width: 100%;
    height: 50px; // 100px * 0.5
    margin-bottom: 5px; // 10px * 0.5
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .header-left {
      margin-left: 10px; // 20px * 0.5
    }
    .header-center {
      margin-right: 10px; // 20px * 0.5
      p {
        font-size: 13px; // 26px * 0.5
      }
    }
  }
  main {
    width: 100%;
    flex: 1;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    .renwu-one {
      width: 100%;
      height: 150px; // 300px * 0.5
      display: flex;
      flex-direction: column;
      .renwu-top {
        width: 100%;
        height: 65px; // 130px * 0.5
        display: flex;
        justify-content: space-between;
        align-items: center;
        .renwu_left {
          width: 70px; // 140px * 0.5
          height: 100%;
          span {
            position: relative;
            top: 30px; // 60px * 0.5
            left: 25px; // 50px * 0.5
            color: #fff;
            font-size: 12px; // 24px * 0.5
          }
        }
        .renwu_right {
          width: 120px; // 240px * 0.5
          margin-right: 14px; // 28px * 0.5
          p {
            font-size: 10px; // 20px * 0.5
            color: #68a8ef;
          }
        }
      }
      .renwu-bot {
        width: 100%;
        margin-top: 10px; // 20px * 0.5
      }
    }
    .renwu-two {
      width: 100%;
      height: 250px; // 500px * 0.5
      display: flex;
      flex-direction: column;
      .renwu-toptwo {
        width: 100%;
        height: 65px; // 130px * 0.5
        display: flex;
        justify-content: space-between;
        align-items: center;
        .renwu_lefttwo {
          width: 70px; // 140px * 0.5
          height: 100%;
          span {
            position: relative;
            top: 32px; // 64px * 0.5
            left: 25px; // 50px * 0.5
            color: #fff;
            font-size: 12px; // 24px * 0.5
          }
        }
      }
      .renwu_bottwo {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        .bottwo_contop {
          width: 90%;
          height: 50px; // 100px * 0.5
          padding: 5px; // 10px * 0.5
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
      }
    }
    .renwu-three {
      width: 100%;
      height: 200px; // 400px * 0.5
      display: flex;
      flex-direction: column;
      .renwu-topthree {
        width: 100%;
        height: 65px; // 130px * 0.5
        display: flex;
        justify-content: space-between;
        align-items: center;
        .renwu_leftthree {
          width: 70px; // 140px * 0.5
          height: 100%;
          span {
            position: relative;
            top: 32px; // 64px * 0.5
            left: 25px; // 50px * 0.5
            color: #fff;
            font-size: 12px; // 24px * 0.5
          }
        }
      }
      .renwu-botthree {
        width: 100%;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        .botthree_contop {
          width: 90%;
          height: 50px; // 100px * 0.5
          padding: 5px; // 10px * 0.5
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
      }
    }
  }
}
</style>
